<template>
  <div class="app-container home">
    <el-row :gutter="24">
      <el-col :span="12" class="card-box">
        <el-card>
          <template #header>
            <span style="vertical-align: middle;font-size: 24px">直播数据汇总</span>
          </template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div style="height:180px">
              <el-row :gutter="20" style="margin-bottom: 30px">
                <el-col
                    :span="24"
                    style="font-size: 32px; text-align: center; color: red"
                >
                  直播带货总销售量{{ totalSales }}元
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="6" style="text-align: center">
                  <div class="title">生鲜</div>
                  <div class="fresh-food-sale">{{ freshFoodSale }}</div>
                </el-col>
                <el-col :span="6" style="text-align: center">
                  <div class="title">美妆</div>
                  <div class="beauty-markup">{{ beautyMarkupSale }}</div>
                </el-col>
                <el-col :span="6" style="text-align: center">
                  <div class="title">户外运动</div>
                  <div class="sports">{{ sportSale }}</div>
                </el-col>
                <el-col :span="6" style="text-align: center">
                  <div class="title">数码</div>
                  <div class="electronics">{{ electronicSale }}</div>
                </el-col>

              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" class="card-box">
        <el-card>
          <template #header>
            <span style="vertical-align: middle;font-size: 24px">佣金到手价</span>
          </template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div style="height: 180px">
              <Echarts :options="options"/>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" class="card-box">
        <el-card>
          <template #header>
            <span style="vertical-align: middle;font-size: 24px">用户评价</span>
          </template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div style="height: 180px">222</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="6" class="card-box">
        <el-card>
          <template #header>
            <span style="vertical-align: middle;font-size: 24px">佣金到手价</span>
          </template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div style="height: 300px">
              <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
              </ul>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" class="card-box">
        <el-card>
          <template #header>
            <div style="display: flex;justify-content: space-between">
              <span style="vertical-align: middle;font-size: 24px">{{ title }}</span>
              <span style="vertical-align: middle;font-size: 24px">
                <el-button :type="types[currentIndex]" size="small" @click="showFreshFood">
                  生鲜
                </el-button>
                 <el-button :type="types[infoIndex]" size="small" @click="showBeautyMarkup">
                  美妆
                </el-button>
              </span>
            </div>
          </template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div style="height:300px">
              <Echarts :options="options" height="300px"/>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" class="card-box">
        <el-card>
          <template #header>
            <span style="vertical-align: middle;font-size: 24px">用户评价</span>
          </template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div style="height: 300px">222</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import Echarts from "../components/ECharts";

const title = ref("生鲜折线图")
const types = ref(['success', 'info']);
const currentIndex = ref(0);
const infoIndex = ref(1)

const version = ref("3.9.0");
const totalSales = ref(60066010);
const freshFoodSale = ref(100000);
const beautyMarkupSale = ref(200000);
const sportSale = ref(300000);
const electronicSale = ref(400000);

const options = ref({})
const freshFoodData = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
  },
  toolbox: {
    show: true,
    feature: {
      mark: {show: true},
      dataView: {show: true, readOnly: false},
      magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
      restore: {show: true},
      saveAsImage: {show: true}
    }
  },
  calculable: true,
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '邮件营销',
      type: 'line',
      stack: '总量',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '联盟广告',
      type: 'line',
      stack: '总量',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '视频广告',
      type: 'line',
      stack: '总量',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '直接访问',
      type: 'line',
      stack: '总量',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: '搜索引擎',
      type: 'line',
      stack: '总量',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};
const beautyMarkupData = {
  title: {
    text: '某楼盘销售情况',
    subtext: '纯属虚构'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['意向', '预购', '成交']
  },
  toolbox: {
    show: true,
    feature: {
      mark: {show: true},
      dataView: {show: true, readOnly: false},
      magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
      restore: {show: true},
      saveAsImage: {show: true}
    }
  },
  calculable: true,
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '成交',
      type: 'line',
      smooth: true,
      itemStyle: {normal: {areaStyle: {type: 'default'}}},
      data: [10, 12, 21, 54, 260, 830, 710]
    },
    {
      name: '预购',
      type: 'line',
      smooth: true,
      itemStyle: {normal: {areaStyle: {type: 'default'}}},
      data: [30, 182, 434, 791, 390, 30, 10]
    },
    {
      name: '意向',
      type: 'line',
      smooth: true,
      itemStyle: {normal: {areaStyle: {type: 'default'}}},
      data: [1320, 1132, 601, 234, 120, 90, 20]
    }
  ]
};

options.value = freshFoodData;

const showFreshFood = () => {
  currentIndex.value = 0
  infoIndex.value = 1
  title.value = "生鲜折线图"
  options.value = freshFoodData
}
const showBeautyMarkup = () => {
  currentIndex.value = 1
  infoIndex.value = 0
  title.value = "美妆折线图"
  options.value = beautyMarkupData
}

function goTarget(url) {
  window.open(url, "__blank");
}
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }

  .title {
    font-size: 18px;
    font-weight: 700;
    color: #4b9c2e;
    padding: 20px;
  }

  .fresh-food-sale {
    font-size: 18px;
    font-weight: 700;
    color: #4b9c2e;
  }

  .beauty-markup {
    font-size: 18px;
    font-weight: 700;
    color: #4b9c2e;
  }

  .sports {
    font-size: 18px;
    font-weight: 700;
    color: #4b9c2e;
  }

  .electronics {
    font-size: 18px;
    font-weight: 700;
    color: #4b9c2e;
  }

}
</style>
